<template>
    <div class="con">
        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">
        <img src="../assets/images/fareDetail.png" alt="" onclick="return false">
        <img :src="siteImageUrl+shop_img" alt="" class="shopTitle" onclick="return false">
        <img :src="siteImageUrl+thumb" alt="" class="title_img" onclick="return false">
        <span class="rmb">¥</span><span class="rmbNum">{{price}}</span>
        <img src="../assets/images/btn_Add.png" alt="" class="add" @click.prevent="changeMoney(1)">
        <input type="text" v-model="quantity">
        <img src="../assets/images/btn_Less.png" alt="" class="minus" @click.prevent="changeMoney(-1)">
        <img src="../assets/images/btn_PAY.png" alt="" class="pay" @click.prevent="pay">
    </div>
</template>
<script>
export default {
    name: "fareDetail",
    data() {
        return {
            quantity: "1",
            thumb: "",
            price_img: "",
            store_id: "",
            ticket_id: "",
            code: "",
            shop_img: "",
            price: ""
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_fare";
    },
    methods: {
        // 购物车加减
        changeMoney(way) {
            if (way > 0) {
                this.quantity++;
            } else {
                this.quantity--;
                if (this.quantity < 1) {
                    this.quantity = 1;
                }
            }
        },
        // 点击按钮创建订单支付
        pay() {
            var qs = require("qs");
            this.$Spin.show({
                render: h => {
                    return h("div", [
                        h("Icon", {
                            class: "demo-spin-icon-load",
                            props: {
                                type: "load-c",
                                size: 18
                            }
                        }),
                        h("div", "Loading")
                    ]);
                }
            });
            this.axios({
                method: "post",
                url: `${this.siteUrl}/piaowu/api/order_create`,
                data: qs.stringify({
                    member_id: $.cookie("osc_member_id"),
                    token: $.cookie("osc_member_token"),
                    store_id: localStorage.getItem("store_id"),
                    ticket_id: this.ticket_id,
                    count: this.quantity
                })
            })
                .then(response => {
                    if (response.data.status == 1) {
                        this.$Spin.hide();
                        //this.code = response.data.data.code;
                        //    调取支付接口

                        var r = response.data.data;
                        // alert("响应："+JSON.stringify(r));
                        if (r.ret_code === 0) {
                            if (r.bizPackage.package !== "prepay_id=") {
                                // 支付操作成功
                                r.bizPackage.success = res => {
                                    if (res.errMsg == "chooseWXPay:ok") {
                                        alert("支付完成");
                                        // 支付成功返回二维码
                                        this.$router.push({ name: "myTicket" });
                                    } else {
                                        alert(res.errMsg);
                                    }
                                };
                                // 支付操作取消
                                r.bizPackage.cancel = res => {
                                    alert("您已取消");
                                };
                                // 支付操作出错
                                r.bizPackage.fail = res => {
                                    alert("支付失败");
                                };
                                // 发起微信支付

                                wx.chooseWXPay(r.bizPackage);
                            } else {
                                alert("错误");
                            }
                        } else if (r.ret_code === 11) {
                            var msg = "";
                            if (r.err.return_code === "FAIL") {
                                msg = r.err.return_msg;
                            } else {
                                msg = r.err.err_code_des;
                            }
                            alert("订单创建失败：" + msg);
                        }
                    } else {
                        this.$Spin.hide();
                        alert("请求失败：" + response.data.msg);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    },
    mounted: function() {
        var qs = require("qs");

        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/ticket_detail`,
            data: qs.stringify({
                member_id: $.cookie("osc_member_id"),
                token: $.cookie("osc_member_token"),
                store_id: localStorage.getItem("store_id"),
                ticket_id: this.$route.params.id
            })
        })
            .then(response => {
                if (response.data.status == 1) {
                    this.thumb = response.data.data.thumb;
                    this.price_img = response.data.data.price_img;
                    this.store_id = response.data.data.store_id;
                    this.ticket_id = response.data.data.id;
                    this.price = response.data.data.price;
                } else {
                    alert("请求失败：" + response.data.msg);
                }
            })
            .catch(function(error) {
                console.log(error);
            });
        this.shop_img = localStorage.getItem("title_img");

        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/get_js_sign`,
            data: qs.stringify({
                url: location.host + location.pathname
            })
        })
            .then(response => {
                console.log(response);
                wx.config({
                    debug: false,
                    appId: response.data.data.appId,
                    timestamp: response.data.data.timestamp,
                    nonceStr: response.data.data.nonceStr,
                    signature: response.data.data.signature,
                    jsApiList: ["chooseWXPay"]
                });
            })
            .catch(err => {
                console.log(err);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    text-align: center;
    position: relative;
}
.con img {
    width: 100%;
}
.con .shopTitle {
    position: absolute;
    top: 20%;
    left: 13%;
    width: 72%;
}

.con .logo {
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
}

.con .add {
    width: 7%;
    position: absolute;
    right: 34%;
    bottom: 7%;
}
.con .minus {
    width: 7%;
    position: absolute;
    right: 11.5%;
    bottom: 7%;
}
.con input {
    width: 7%;
    height: 5%;
    text-align: center;
    right: 18%;
    transform: translate(-50%, 0%);
    position: absolute;
    bottom: 7%;
}

.con .pay {
    position: absolute;
    bottom: -10%;
    width: 28%;
    right: 10%;
}

.con .title_img {
    width: 24%;
    position: absolute;
    left: 10%;
    bottom: 4%;
}

.rmb {
    position: absolute;
    left: 35%;
    bottom: 5%;
    font-size: 9vw;
    font-weight: bold;
    color: #fe2f73;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0#fff, 0 -1px #fff;
    font-family: Arial, Helvetica, sans-serif;
}
.rmbNum {
    position: absolute;
    left: 41%;
    bottom: 5%;
    font-size: 9vw;
    font-weight: bold;
    color: #fe2f73;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0#fff, 0 -1px #fff;
    font-family: Arial, Helvetica, sans-serif;
}
</style>
